html学习笔记

一、标签

1. 无归属标签

1. address用于定义文章的联系信息
2. <cite> 元素定义著作的标题
3. <bdo> 元素用于定义文本的方向

2. <p>

浏览器会自动在段落的前后添加空行
如果希望在不产生新的段落的情况下进行换行，使用<br/>标签

3. 引用 <q> <blockquote>

<q>用于定义短的引用，通常会为<q>元素包含引号
<blockquote>用于定义块引用，通常会进行缩进处理。示例, cite属性用于表示引用的来源

4. 缩写 <abbr> <dfn>

<abbr>用于定义缩写或首字母缩略语

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

<dfn>用于定义项目，<dfn> 标签可标记那些对特殊术语或短语的定义。、

5. a 标签

有两种使用 a 标签的方式：

• 通过使用 href 属性 - 创建指向另一个文档的链接

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School</a>

• 通过使用 name 属性 - 创建文档内的书签

<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

• target属性
  a 标签的 target 属性规定在何处打开链接文档。

  • （1）打开新窗口并且为窗口定义一个名字，之后

6. <img>标签

• alt属性用于定义一段可替换的文本，当浏览器无法载入图像时，浏览器将显示替代性放入文本而不是图像

7. table表格

<table border="1">
    <caption>Monthly savings</caption>  <!--标题必须跟在caption后面-->
    <tr>
        <th>Heading</th>    <!--表头用th标签进行定义-->
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

8. html列表

1. ul无序列表 ul>li
2. ol有序列表 ol>li
3. dl定义列表 dl>dt+dd

<dl>
    <dt>Coffee</dt>        <!--定义项目-->
    <dd>Black hot drink</dd>        <!--定义项目对应的描述-->
    
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9. meta标签

name属性主要用于描述网页，对应属性是 content

1. Keywords 为搜索引擎提供的关键字列表
2. name="viewport"

能够优化移动浏览器的显示，设置屏幕的缩放属性

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

width [device-width | pixel_value]width, 如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；

height – viewport 的高度 （范围从 223 到 10,000 ）

user-scalable [yes | no]是否允许缩放

initial-scale [数值] 初始化比例（范围从 > 0 到 10）

minimum-scale [数值] 允许缩放的最小比例

maximum-scale [数值] 允许缩放的最大比例

1. Description 用来告诉搜索引擎你的网站主要内容
2. copyright 标注版权
3. http-equiv属性
   http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

• Set-Cookie

浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。

1. content-Type

设定页面使用的字符集
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
在HTML5中，我们一般都是：

<meta charset="utf-8"/>

1. head>base元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />

二、属性

属性提供了有关HTML元素的更多的信息，属性值应该始终被包含在引号内。

三、html响应式设计

响应式设计就是能够以可变尺寸传递网页

3.1 响应式布局方法汇总

1. 百分比布局
   对图片和大块布局进行百分比设置
2. 媒体查询
   利用媒体查询设置不同分辨率下的css样式

        body{
            background-color: grey;
        }

        @media screen and (min-width:1200px){ /*当宽度大于1200px时*/
            body{
                background-color: pink;
            }
        }

        @media screen and (min-width:700px) and (max-width:1200px){
            body{
                background-color: blue;
            }
        }

        @media screen and (max-width:700px){ /*当宽度小于700px时*/
            body{
                background-color: orange;
            }
        }

1. vw响应式布局

vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

vw、vh、rem的使用

<template>
    <div class="box">
        
    </div>
</template>
<style>
    .box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin:0 auto;
        font-weight: bold;
        background-color: rgba(255,255,255,0.8);
    }
</style>

上面代码中的50vw代表了 此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;
字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。

四、基础知识补充

1. 你不知道的css单位

• rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;
• vw:相对于视口的宽度。视口被均分为100单位的vw;
• vh:相对于视口的高度。视口被均分为100单位的vh;
• vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;